<template>
	<uw-dialog title="选择商品" v-model="showModel" width="70%">
		<template #default>
			<el-table :data="tableData" @selection-change="selectionChange">
				<el-table-column type="selection" width="60px" align="center"></el-table-column>
				<el-table-column prop="id" width="80px" label="ID" align="center"></el-table-column>
				
				<el-table-column prop="name" label="商品名称" align="center" />
				<el-table-column prop="image" label="商品图片" align="center" >
					<template #default="{row}">
						<el-image :src="row.image" style="width: 50px;height: 50px;"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="statusText" label="状态" align="center" />
			</el-table>
			<uw-pagination :currentPage="currentPage" :total="totalNum" @change="changePages"></uw-pagination>
		</template>
		<template #footer>
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="submit">确定</el-button>
		</template>
	</uw-dialog>
</template>

<script setup lang="ts">
	import { ref, watch , reactive, onMounted } from 'vue';
	import { ElMessage } from 'element-plus';
	import { getGoodsListApi } from '@/api/goods';
	const props = withDefaults(defineProps<{
		modelValue ? : boolean
	}>(),{
		modelValue : false
	})
	const emit = defineEmits(['update:modelValue','change'])
	const showModel = ref<boolean>(false)
	watch(()=>props.modelValue,(newVal:boolean)=>{
		showModel.value = newVal
	})
	watch(()=>showModel.value,(newVal:boolean)=>{
		emit('update:modelValue',newVal)
	})
	const currentPage = ref(1)
	const tableData = ref([])
	const goodsIds = ref([])
	const totalNum = ref(0)
	const getGoodsList = () => {
		getGoodsListApi({
			page:currentPage.value,
			pageSize:10
		}).then(res=>{
			tableData.value = res.data.list
			totalNum.value = res.data.total
		})
	}
	
	const handleClose = () => {
		showModel.value = false
	}
	
	const submit = () => {
		if(goodsIds.value.length === 0) return ElMessage.error('请选择商品')
		emit('change',goodsIds.value)
		showModel.value = false
	}
	const changePages = (index:number) => {
		currentPage.value = index
		getGoodsList()
	}
	const selectionChange = (val:any)=>{
		goodsIds.value = val
	}
	
	onMounted(()=>{
		getGoodsList()
	})
</script>

<style>
</style>